<script setup>

import CommonBox from "../../components/CommonBox.vue";
import {onMounted, ref} from "vue";
import screenApi from "../../router/screen.js";

const dataTotal1 = ref(
    {
      background: '#999999',
      grid: {
        left: '4%',
        bottom: '10%',
        containLabel: true,
      },
      series: [
        {
          name: '',
          type: 'gauge',
          splitNumber: 4, //刻度数量
          startAngle: 220, //开始角度 左侧角度
          endAngle: -40, //结束角度 右侧
          min: 0,
          max: 1500000,
          radius: '100%', //图表尺寸
          center: ['50%', '50%'],
          title: {
            show: true,
            offsetCenter: [0, 30], // x, y，单位px
            textStyle: {
              color: '#43A4F3',
              fontSize: 18,
            },
          },
          detail: {
            show: true,
            offsetCenter: [0, 60],
            color: '#43A4F3',
            fontSize: 14,
            height: 20,
            borderColor: '#ccc',
            borderRadius: 5,
            borderWidth: 0.1,
            formatter: '{value}',
          },
          axisLine: {
            show: false,
            lineStyle: {
              width: 0,
              shadowBlur: 0,
              color: [
                [0.2, '#43A4F3'],
                [0.8, '#43A4F3'],
                [1, '#43A4F3'],
              ],
            },
          },
          axisTick: {
            show: true,
            lineStyle: {
              color: 'auto',
              width: 3,
            },
            length: 10,
            splitNumber: 6,
          },
          splitLine: {
            show: false,
            length: 20,
            lineStyle: {
              color: 'auto',
            },
          },
          axisLabel: {
            show: false,
          },
          pointer: {
            //仪表盘指针
            icon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z',
            show: true,
            length: '70%',
            width: 5,
            anchor: {
              showAbove: true,
              size: 6
            },
            itemStyle: {
              color: '#C0911F',
              shadowColor: 'rgba(0, 0, 0, 0.3)',
              shadowBlur: 8,
              shadowOffsetX: 2,
              shadowOffsetY: 4
            }
          },
          data: [
            {
              name: '元',
              value: 500000,
            },
          ],
        },
      ],
    });

const dataTotal2 = ref(
    {
      background: '#999999',
      grid: {
        left: '4%',
        bottom: '10%',
        containLabel: true,
      },
      series: [
        {
          name: '',
          type: 'gauge',
          splitNumber: 4, //刻度数量
          startAngle: 220, //开始角度 左侧角度
          endAngle: -40, //结束角度 右侧
          min: 0,
          max: 145000,
          radius: '100%', //图表尺寸
          center: ['50%', '50%'],
          title: {
            show: true,
            offsetCenter: [0, 30], // x, y，单位px
            textStyle: {
              color: '#43A4F3',
              fontSize: 18,
            },
          },
          detail: {
            show: true,
            offsetCenter: [0, 60],
            color: '#43A4F3',
            fontSize: 14,
            height: 20,
            borderColor: '#ccc',
            borderRadius: 5,
            borderWidth: 0.1,
            formatter: '{value}',
          },
          axisLine: {
            show: false,
            lineStyle: {
              width: 0,
              shadowBlur: 0,
              color: [
                [0.2, '#43A4F3'],
                [0.8, '#43A4F3'],
                [1, '#43A4F3'],
              ],
            },
          },
          axisTick: {
            show: true,
            lineStyle: {
              color: 'auto',
              width: 3,
            },
            length: 10,
            splitNumber: 6,
          },
          splitLine: {
            show: false,
            length: 20,
            lineStyle: {
              color: 'auto',
            },
          },
          axisLabel: {
            show: false,
          },
          pointer: {
            //仪表盘指针
            icon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z',
            show: true,
            length: '70%',
            width: 5,
            anchor: {
              showAbove: true,
              size: 6
            },
            itemStyle: {
              color: '#C0911F',
              shadowColor: 'rgba(0, 0, 0, 0.3)',
              shadowBlur: 8,
              shadowOffsetX: 2,
              shadowOffsetY: 4
            }

          },

          data: [
            {
              name: '个',
              value: 45000,
            },
          ],
        },
      ],
    });

const dataTotal3 = ref(
    {
      background: '#999999',
      grid: {
        left: '4%',
        bottom: '10%',
        containLabel: true,
      },
      series: [
        {
          name: '',
          type: 'gauge',
          splitNumber: 4, //刻度数量
          startAngle: 220, //开始角度 左侧角度
          endAngle: -40, //结束角度 右侧
          min: 0,
          max: 100,
          radius: '100%', //图表尺寸
          center: ['50%', '50%'],
          title: {
            show: true,
            offsetCenter: [0, 30], // x, y，单位px
            textStyle: {
              color: '#43A4F3',
              fontSize: 18,
            },
          },
          detail: {
            show: true,
            offsetCenter: [0, 60],
            color: '#43A4F3',
            fontSize: 14,
            height: 20,
            borderColor: '#ccc',
            borderRadius: 5,
            borderWidth: 0.1,
            formatter: '{value}%',
          },
          axisLine: {
            show: false,
            lineStyle: {
              width: 0,
              shadowBlur: 0,
              color: [
                [0.2, '#43A4F3'],
                [0.8, '#43A4F3'],
                [1, '#43A4F3'],
              ],
            },
          },
          axisTick: {
            show: true,
            lineStyle: {
              color: 'auto',
              width: 3,
            },
            length: 10,
            splitNumber: 6,
          },
          splitLine: {
            show: false,
            length: 20,
            lineStyle: {
              color: 'auto',
            },
          },
          axisLabel: {
            show: false,
          },
          pointer: {
            //仪表盘指针
            icon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z',
            show: true,
            length: '70%',
            width: 5,
            anchor: {
              showAbove: true,
              size: 6
            },
            itemStyle: {
              color: '#C0911F',
              shadowColor: 'rgba(0, 0, 0, 0.3)',
              shadowBlur: 8,
              shadowOffsetX: 2,
              shadowOffsetY: 4
            }

          },
          data: [
            {
              name: '百分比',
              value: 65,
            },
          ],
        },
      ],
    });

//定义map对象
function getPurchaseData() {
  screenApi.getPurchaseData().then(res=>{
    dataTotal1.value.series[0].data[0].value = res.purchaseAmount;
    dataTotal2.value.series[0].data[0].value = res.purchaseQuantity;
    dataTotal3.value.series[0].data[0].value = res.conversionRate;
  });
}

onMounted(async () => {
  //数据
  getPurchaseData();
});

</script>

<template>
  <common-box>
    <div class="chart-header2">
      采购金额
    </div>
    <div style="height: 15em;width: 100%;">
      <v-chart :option="dataTotal1"></v-chart>
    </div>
  </common-box>

  <common-box>
    <div class="chart-header">
      采购数量
    </div>
    <div style="height: 15em;width: 100%;">
      <v-chart :option="dataTotal2"></v-chart>
    </div>
  </common-box>

  <common-box>
    <div class="chart-header2">
      采购下单率
    </div>
    <div style="height: 15em;width: 100%;">
      <v-chart :option="dataTotal3"></v-chart>
    </div>
  </common-box>

</template>

<style scoped>
.chart-header2 {
  text-align: center;
  font-size: 1.5em;
  padding: 0.2em 0 0.2em 1em;
}

.chart-header {
  text-align: center;
  font-size: 2em;
  padding: 0.2em 0 0.2em 1em;
}

</style>